<template>
	<view style="min-height: 100vh;background-color: #F3F3F3;">
		<view style="padding: 16upx 24upx;">
			<view class="contentList">
				<view class="contentItem" v-for="(item,index) in conList" :key="index" :data-id="item.ShopEvaluation.id" @click="toActivityDetails">
					<view class="contentItem_top">
						<view class="contentImage" v-if="item.ShopEvaluation.ShopEvaluationExampleImage.length>0" :style="{'background-image':'url('+getImgUrl(item.ShopEvaluation.ShopEvaluationExampleImage[0].image_url)+')'}">
							<!-- <image :src="getImgUrl(item.ShopEvaluation.ShopEvaluationExampleImage[0].image_url)" mode="" v-if="item.ShopEvaluation.ShopEvaluationExampleImage.length>0"></image> -->
						</view>
						<view class="content_R">
							<view class="contentNameBox">
								<view class="contentItemName">{{item.ShopEvaluation.title}}</view>
								<view class="Royalties">稿费￥{{item.ShopEvaluation.talent_money}}</view>
							</view>
							<view class="addressBox">
								<view class="fieldBox">
									<view class="recommendtitle fieldtitle">领域</view>
									<view class="fieldtext">{{item.Shop.industry.name}}</view>
								</view>
								
								<view class="addressNum">
									<view class="address">{{item.Shop.name}}</view>
									<view class="addressR">{{item.Shop.distance}}km</view>
									
								</view>
								
							</view>
							<view class="fansBox">
								<view class="fansIcon" v-if="item.ShopEvaluation.platform==1">
									<image src="/static/index/fans.png" mode=""></image>
								</view>
								<view class="fansIcon" v-if="item.ShopEvaluation.platform==2" style="background: #F40A0B;">
									<image src="../../static/mine/xiaohongshu_white.png" mode="widthFix" style="width: 36upx;"></image>
								</view>
								<view class="fansIcon" v-if="item.ShopEvaluation.platform==3" style="background: #FFD974;">
									<image src="../../static/mine/weibo_white.png" mode="widthFix" style="width: 20upx;"></image>
								</view>
								<view class="fansIcon" v-if="item.ShopEvaluation.platform==4" style="background: #F36326;">
									<image src="../../static/mine/dazong_white.png" mode="heightFix" style="height: 24upx;"></image>
								</view>
								
								<view class="fanstext"><text>粉丝数{{item.ShopEvaluation.fans_num}}以上</text><text v-if="item.ShopEvaluation.platform==4">;等级{{item.ShopEvaluation.public_grade}}以上</text></view>
							</view>
							<view class="recommendBox">
								<view class="recommendtitle">内容</view>
								<view class="recommendtext">{{item.ShopEvaluation.content}}</view>
							</view>
							
						</view>
					</view>
					<view class="contentItem_B">
						<view class="surplus">
							<!-- #ifdef APP -->
							分享达人可赚取<text>{{item.ShopEvaluation.user_commission_money}}</text>元
							<!-- #endif -->
						</view>
						<view class="surplusNum">仅剩:<span style="color: #FF5555;">{{item.ShopEvaluation.num}}</span>份</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				conList:[],
				page:1,
				id:"",
				moreFlag:false
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad(options) {
			this.id = options.id;
			this.getList();
		},
		methods: {
			toActivityDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pageone/pages/ActivityDetails/ActivityDetails?id="+id
				})
			},
			getImgUrl(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList(){
				let obj = {};
				obj.shop_package_id = this.id;
				obj.dimension = app.$vm.globalData.latitude;
				obj.longitude = app.$vm.globalData.longitude;
				// obj.longitude = uni.getStorageSync("longitude");//117.082094;;
				// obj.dimension = uni.getStorageSync("latitude");//39.987725;
				let newObj = {};
				newObj.page = this.page;
				newObj.data = obj;
				this.$u.api.shopEvaluationRelationList(newObj).then(res=>{
					if(this.page==1){
						this.conList = res.data.list.data.map(cur=>{
							cur.Shop.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
							return cur;
						});
					}else{
						this.conList = this.conList.concat(res.data.list.data.map(cur=>{
							cur.Shop.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
							return cur;
						}));
					}
					if(this.page<res.data.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.contentList{
		margin-top: 24upx;
		.contentItem{
			width: 702upx;
			height: auto;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx;
			margin-bottom: 16upx;
			.contentItem_top{
				display: flex;
				padding: 32upx 0 24upx 24upx;
				.contentImage{
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					margin-right: 16upx;
					background-position: center;
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.content_R{
					width: calc(100% - 160upx);
					.contentNameBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.contentItemName{
							font-size: 24upx;
							color: #333333;
						}
						.Royalties{
							// width: 92upx;
							// height: 32upx;
							background: linear-gradient(206deg, #FAD96C 0%, #FFAC3F 100%);
							opacity: 1;
							border-radius: 20upx 0 0 20upx;
							font-size: 16upx;
							color: #fff;
							
							padding: 8upx;
						}
					}
					.addressBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 8upx;
						padding-right: 24upx;
						
						.addressNum{
							display: flex;
							align-items: center;
							.address{
								// width: 300upx;
								margin-right: 10upx;
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
							.addressR{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
						}
					}
					.fansBox{
						display: flex;
						align-items: center;
						margin-top: 8upx;
						
						.fansIcon{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 48upx;
							height: 24upx;
							background: #260A20;
							opacity: 1;
							border-radius: 4upx;
							image{
								width: 24upx;
								height: 24upx;
							}
						}
						.fanstext{
							width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.recommendBox{
						display: flex;
						align-items: center;
						margin-top: 8upx;
						.recommendtitle{
							width: 48upx;
							height: 24upx;
							background: #FFAC3F;
							opacity: 1;
							border-radius: 4upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							text-align: center;
							line-height: 24upx;
							color: #FFFFFF;
							// padding: 4upx;
							// box-sizing: border-box;
							margin-right: 8upx;
						}
						.recommendtext{
							width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.fieldBox{
						display: flex;
						align-items: center;
						// margin-top: 18upx;
						.fieldtitle{
							width: 48upx;
							height: 24upx;
							background: #FF5555;
							opacity: 1;
							border-radius: 4upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 24upx;
							text-align: center;
							color: #FFFFFF;
							// padding: 4upx;
						}
						.fieldtext{
							// width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.contentItem_B{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24upx;
				height: 44upx;
				background-color: #FFEBD0;
				border-radius: 0 0 20upx 20upx;
				box-sizing: border-box;
				.surplus{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					text{
						font-size: 24upx;
						color: red;
					}
				}
				.surplusNum{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>
